<template>
    <footer>
        <div class="footer">
            <ul>
                <li >
                    <router-link
                    exact 
                active-class="active"
                     to="/">
                        <div>
                            <div class="test">
                                
                            </div>
                            <p>考试</p>
                        </div>
                    </router-link>
                </li>
                <li >
                    <router-link
                    exact 
                active-class="active"
                     to="/my">
                        <div>
                            <div class="my">
                               
                            </div>
                            <p>我的</p>
                        </div>
                   </router-link>
                </li>
            </ul>
        </div>
    </footer>
</template>
<script>
export default {
    
}
</script>
<style scoped>
footer {
  width: 100%;
  height: 60px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
}

footer .footer {
  width: 100%;
  height: 100%;
}

footer .footer ul {
  width: 100%;
  height: 100%;
  display: flex;
}

footer .footer ul li {
  flex-grow: 1;
  height: 60px;
  display: flex;
  justify-content: center;
}

footer .footer ul li a {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

footer .footer ul li a div {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
  justify-content: center;
}

footer .footer ul li a div .test {
  width: 30px;
  height: 30px;
  background-image: url("../assets/test.png");
  background-size: cover;
}
footer .footer ul a.active p{
  color: #4070ff;
}
footer .footer ul li a.active div .test {
  width: 30px;
  height: 30px;
  background-image: url("../assets/test-active.png");
  background-size: cover;
}

footer .footer ul li a div .my {
  width: 30px;
  height: 30px;
  background-image: url("../assets/my.png");
  background-size: cover;
}
footer .footer ul li a.active div .my {
  width: 30px;
  height: 30px;
  background-image: url("../assets/my-active.png");
  background-size: cover;
}
</style>